import { Area, AreaChart, ResponsiveContainer, Tooltip } from "recharts";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { Separator } from "../ui/separator";
import { CustomTooltip } from "./tooltip";

const data = Array.from({ length: 7 }, (_, i) => ({
	number: `#${i + 1}`,
	bug: Math.floor(Math.random() * 100),
	script: Math.floor(Math.random() * 100),
	env: Math.floor(Math.random() * 100),
}));

export function BugTrendingChart() {
	return (
		<Card className="gap-4">
			<CardHeader>
				<CardTitle className="flex justify-between">
					<span>Bug Thrending</span>
					<div className="flex items-center gap-3">
						<span>32 K</span>
						<Separator
							orientation="vertical"
							className="data-[orientation=vertical]:h-4"
						/>
						<span className="text-destructive">32 K</span>
					</div>
				</CardTitle>
				<CardDescription>Showing total visitors</CardDescription>
			</CardHeader>
			<CardContent className="h-full">
				<ResponsiveContainer height="100%" width="100%" debounce={200}>
					<AreaChart
						accessibilityLayer
						data={data}
						margin={{
							left: 0,
							right: 0,
							bottom: 0,
						}}
					>
						<defs>
							<pattern
								id="stripe"
								patternUnits="userSpaceOnUse"
								width="4"
								height="4"
								patternTransform="rotate(45)"
							>
								<rect width="1" height="6" fill="transparent" />
								<rect
									x="2"
									width="1"
									height="6"
									fill="var(--color-secondary)"
								/>
								<rect x="4" width="2" height="6" fill="transparent" />
							</pattern>
						</defs>
						<Tooltip
							content={<CustomTooltip />}
							cursor={{
								stroke: "var(--color-muted)",
								strokeWidth: 1,
								strokeDasharray: "3 3",
								pointerEvents: "none",
							}}
						/>
						<Area
							dataKey="bug"
							type="monotone"
							fill="url(#stripe)"
							fillOpacity={0.4}
							stroke="var(--color-primary)"
							strokeWidth={2}
						/>
					</AreaChart>
				</ResponsiveContainer>
			</CardContent>
		</Card>
	);
}
